---
title: typescript-stencil-apollo
description: A Stencil plugin for generating TypeScript code from GraphQL queries. This plugin uses Apollo Client.
---

import { PluginApiDocs, PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })

<PluginHeader />
<PluginApiDocs />

## Usage Example

For the given input:

```graphql
query Test {
  feed {
    id
    commentCount
    repository {
      full_name
      html_url
      owner {
        avatar_url
      }
    }
  }
}
```

We can use the generated code like this:

```tsx
<TestComponent variables={...}>
  …
</TestComponent>
```
